<template>
  <div>
    <van-row>
      <!-- 搜索 -->
      <van-sticky>
        <van-field v-model="query.keyword" clearable label="商品搜索" placeholder="请输入关键字">
          <template #button>
            <van-button size="small" type="primary" @click="handleSearch">搜索</van-button>
          </template>
        </van-field>
      </van-sticky>
    </van-row>
    <van-row>
      <!-- 左侧分类 -->
      <van-col span="6">
        <van-sticky :offset-top="46">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="(item,i) in categoryList" :key="i" :title="item.name"
                              @click="handleLeftMenus(item.id)"/>
          </van-sidebar>
        </van-sticky>

      </van-col>
      <!-- 右侧商品列表 -->
      <van-col span="18">

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
                    :immediate-check="false" :offset="0">
            <!-- 商品卡片列表 -->
            <van-card v-for="(item,i) in goodsList" :key="i" :price="item.price" :desc="item.spec"
                      :title="item.name" :thumb=" $fullUrl(item.img)" @click="handleDetail(item.id)"/>
          </van-list>

        </van-pull-refresh>

      </van-col>
    </van-row>
  </div>
</template>

<script>
//1.导入封装后的接口
import * as GoodsAPI from "@/api/goods.js";
import * as CategoryAPI from "@/api/category.js"

export default {
  data() {
    return {
      goodsList: [], //商品类别（指定分类id）
      categoryList: [], //分类列表

      //左侧 导航栏
      activeKey: 0,

      totalPage: 0, //总页数

      //上拉加载控制变量
      loading: false,
      finished: false,

      //下拉刷新
      refreshing: false,

      //查询参数
      query: {
        categoryId: null,
        pageIndex: 0, //当前页码
        pageSize: 8, //页码大小
        keyword: "", //查询关键字
      },
    }
  },

  //生命周期的钩子函数，当实例别创建好了后被调用
  created() {
    //获取所有分类
    CategoryAPI.getList().then(result => {
      console.log(result); //调式输出，也可以看看数据结构
      this.categoryList = result.data;
      this.query.categoryId = this.categoryList[0].id; //取分类列表中的第一个分类id
      this.onRefresh();
    });
  },
  methods: {

    // 单击左菜单中的某一项后，显示对应分类的商品列表
    handleLeftMenus(categoryId) {
      this.query.categoryId = categoryId; //更新分类id
      this.onRefresh();
    },

    handleDetail(id) {
      this.$router.push({
        name: 'goodsDetail',
        params: {
          id
        },
      });
    },

    //上拉加载
    onLoad() {
      this.query.pageIndex += 1; //页码增加
      GoodsAPI.queryPage(this.query).then(result => {
        //如果是刷新商品列表就清空
        if (this.refreshing) {
          this.goodsList = [];
          this.refreshing = false;
        }

        //总页数
        this.totalPage = result.data.totalPage;
        //数组 拼接
        if (result.data.list.length > 0) {
          this.goodsList = this.goodsList.concat(result.data.list);
        }

        this.loading = false;

        if (this.query.pageIndex >= this.totalPage) {
          this.finished = true;
        }

      });

    },

    //下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.query.pageIndex = 0; //重置页号
      this.goodsList = [];

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },

    //搜索商品
    handleSearch() {
      this.onRefresh();
    }
  }
}
</script>

<style lang="less" scoped="scoped">
.van-sidebar {
  width: 100px;
}

.van-sidebar-item {
  padding: 10px;
}

.van-card {
  font-size: 14px;

  .van-card__content {
    justify-content: center;

    .van-card__price {
      color: red;
      font-weight: bold;
      text-align: right;
    }
  }
}
</style>
